<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 400px;
      height: 400px;
      background: darkolivegreen;
      position: relative;
    }

    h1 {
      position: relative;
      width: 200px;
      height: 200px;
      background: salmon;
    }

    span {
      position: absolute;
      top: 150px;
      left: 50px;

    }

    ul .active {
      background: red;
    }

    .kk {
      background: blue;
    }
  </style>
</head>

<body>


  <div id="box">
    <h1>
      今天星期四，马上放假了
      <span class="one">放假1天</span>
    </h1>
  </div>
  <ul>
    <li>111</li>
    <li class="active">222</li>
    <li>333</li>
    <li>444</li>
  </ul>
  <ol>
    <li>dnf</li>
    <li>lol</li>
    <li>cf</li>
    <li>和平精英</li>
  </ol>
  <ul id="con">
    <li class="hot">刺杀小说家</li>
    <li>史密斯夫妇</li>
    <li>罗马假日</li>
    <li>目光支撑</li>
    <li class="hot">阿甘正传
      <a>经典励志影片</a>
    </li>
    <li>举起手来</li>
  </ul>
  <!-- -->
  <ul id="content">
    <li>乌龙茶</li>
    <li>张伟</li>
    <li>王东</li>
    <li>李娜</li>
    <li>王芳</li>
    <li>王杰</li>
  </ul>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    $(function () {
      // parent() 获取父元素
      console.log($(".one").parent())
      // parents() 获取父辈元素
      console.log($(".one").parents())
      // parentUntil(条件) 获取父辈元素直到条件位置
      console.log($(".one").parentsUntil("body"));

      // offetParent()  返回第一个匹配元素用于定位的父节点。
      console.log($(".one").offsetParent())
      // 

      $("ul li").click(function () {
        // this--原生当前元素
        // $(this)  --当前发生事件的元素
        // siblings() 其他兄弟元素
        // addClass()给元素添加class 
        // removeClass() 移除元素的class
        $(this).addClass("active").siblings().removeClass("active")
      })


      $("ol li").click(function () {
        // hasClass() 判断元素是否含有某个class 含有返回true  不含有false 
        if ($(this).hasClass("kk")) {
          $(this).removeClass("kk")
        } else {
          $(this).addClass("kk")
        }
      })
      //filter(选择器) 筛选出与指定表达式匹配的元素集合。  留下符合过滤条件的元素
      $("#con li").filter(".hot").css("color", "red");

      // has(条件)  查找包含 某个条件的元素
      $("#con li").has("a").css("background", "blue")

      // not(选择器) 去掉符合条件的元素 
      $("#con li").not(".hot").css("color", "green")
      // slice(start,end) 选择开始下标到结束下标的元素  留头不留尾

      $("#content li").slice(2, 4).css("color", "red")

      // map 遍历元素 
      $("#content li").map(function (index, ele) {
        console.log(ele)//ele 代表每个原生元素
        if (index % 2 == 0) {
          ele.style.background = "blue";
        } else {
          ele.style.background = "pink";
        }
      })
    })

  </script>
</body>

</html>